@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    font-variation-settings: normal;
  }
  
  body {
    @apply text-gray-900 bg-gray-50 antialiased;
  }
  
  /* Typography scale */
  h1, .h1 {
    @apply text-4xl font-bold tracking-tight text-gray-900;
  }
  
  h2, .h2 {
    @apply text-3xl font-semibold tracking-tight text-gray-900;
  }
  
  h3, .h3 {
    @apply text-2xl font-semibold text-gray-900;
  }
  
  h4, .h4 {
    @apply text-xl font-medium text-gray-900;
  }
  
  h5, .h5 {
    @apply text-lg font-medium text-gray-900;
  }
  
  h6, .h6 {
    @apply text-base font-medium text-gray-900;
  }
  
  /* Code/monospace text */
  code, .font-mono {
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;
  }
}

@layer components {
  /* Enhanced metric cards */
  .metric-card {
    @apply bg-white rounded-xl shadow-soft border border-gray-200 p-6 transition-all duration-200 hover:shadow-medium;
  }
  
  .metric-value {
    @apply text-3xl font-bold text-gray-900 tracking-tight;
  }
  
  .metric-label {
    @apply text-sm font-medium text-gray-500 uppercase tracking-wider;
  }
  
  /* Status badges */
  .status-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
  }
  
  .status-online {
    @apply bg-green-100 text-green-800 border border-green-200;
  }
  
  .status-offline {
    @apply bg-red-100 text-red-800 border border-red-200;
  }
  
  .status-connecting {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
  }
  
  /* Progress bars */
  .progress-bar {
    @apply bg-gray-200 rounded-full overflow-hidden;
  }
  
  .progress-fill {
    @apply h-full transition-all duration-300 ease-out;
  }
  
  .progress-cpu {
    @apply bg-green-500;
  }
  
  .progress-memory {
    @apply bg-yellow-500;
  }
  
  .progress-disk {
    @apply bg-blue-500;
  }
  
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  
  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 shadow-sm hover:shadow-md;
  }
  
  .btn-secondary {
    @apply bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500;
  }
  
  /* Cards */
  .card {
    @apply bg-white rounded-xl shadow-soft border border-gray-200 overflow-hidden;
  }
  
  .card-header {
    @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
  }
  
  .card-body {
    @apply p-6;
  }
  
  /* Charts */
  .chart-container {
    @apply bg-white rounded-xl shadow-soft border border-gray-200 p-4;
  }
}

@layer utilities {
  /* Text utilities */
  .text-balance {
    text-wrap: balance;
  }
  
  /* Scrollbar styling */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: theme('colors.gray.300') theme('colors.gray.100');
  }
  
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
    background: theme('colors.gray.100');
    border-radius: 3px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: theme('colors.gray.300');
    border-radius: 3px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: theme('colors.gray.400');
  }
}